<template>
	<view class="p_re">
		<view class="w h200 order-detail-bg dis_f ac">
			<image class="w40 h40 ml40" src="../../static/image/icon_time.png" mode="widthFix"></image>
			<view class="fz34 tf ml16">
				{{OrderObj.order_status==1 ? '已取消' : OrderObj.order_status==2 ? '待支付':OrderObj.order_status==3 ? '待派单' : OrderObj.order_status==4 ? '待上门' : OrderObj.order_status==5 ? '服务中' : '已完成'}}
			</view>
		</view>
		<view class="dis_flex w702 bz bac_f radius16 ml24 mr24 pl30 pr40 pt30 pb30 p_ab bs6" style="top:150rpx">
			<view class="">
				<view class="fz26 fw  tf_22">感谢您使用保洁服务！</view>
				<view class="fz24 mt10 tf_999">{{ order_info.order_info.xiadan_time }}</view>
			</view>
			<view class=""><image class="w24 h24" src="../../static/image/user_you.png" mode="widthFix"></image></view>
		</view>
		<view class="padding30 bac_f">
			<view class="fw fz26" style="margin-top: 124rpx;">服务信息</view>
			<u-gap height="1" bgColor="#E7E7E7" marginTop="10"></u-gap>
			<view class="dis_flex mt20 fz26 tf_999">
				<view class=" ">服务项目</view>
				<view class="">{{OrderObj.name}}</view>
			</view>
		</view>
		<view v-if="order_info.master.avatar_image" class="dis_f bac_f mt24 padding30">
			<image class="w96 h96 radius501" :src="order_info.master.avatar_image" mode="widthFix"></image>
			<view class="ml24">
				<view class="fz28 tf_333">{{ order_info.master.name }}</view>
				<view style="margin-top: 4rpx; margin-left: -4rpx"><u-rate size="20rpx" :count="xincount" readonly :value="order_info.master.star" active-color="#FF970E"></u-rate></view>
			</view>
		</view>
		<view class="padding30 bac_f mt24">
			<view class="fw fz26">收费明细</view>
			<u-gap height="1" bgColor="#E7E7E7" marginTop="10"></u-gap>
			<view class="dis_flex mt20 fz26 tf_999">
				<view class=" ">{{ order_info.mingxi.sku_name }}</view>
				<view class="">¥{{ order_info.mingxi.sku_price }}</view>
			</view>
			<u-gap height="1" bgColor="#E7E7E7" marginTop="15"></u-gap>
			<view class="dis_flex mt20">
				<view class="fw fz26">费用总计</view>
				<view class="tf1">¥{{ order_info.mingxi.sku_price }}</view>
			</view>
		</view>
		<view class="padding30 bac_f mt24">
			<view class="fw fz26">订单信息</view>
			<u-gap height="1" bgColor="#E7E7E7" marginTop="10"></u-gap>
			<view class="dis_flex mt20 fz26 tf_999" style="min-width: 104rpx;">
				<view class=" ">订单号</view>
				<view class="">{{ order_info.order_info.order_no }}</view>
			</view>
			<view class="dis_flex mt20 fz26 tf_999" style="min-width: 104rpx;">
				<view class=" ">下单时间</view>
				<view class="">{{ order_info.order_info.xiadan_time }}</view>
			</view>
			<view class="dis_flex mt20 fz26 tf_999" style="min-width: 104rpx;">
				<view class=" ">联系人</view>
				<view class="">{{ order_info.order_info.user }}</view>
			</view>
			<view class="df jcsb mt20 fz26 tf_999" style="min-width: 104rpx;">
				<view class=" ">服务地址</view>
				<view class="" style="text-align: right;max-width: 520rpx;">{{ order_info.order_info.address }}</view>
			</view>
			<view class="dis_flex mt20 fz26 tf_999" style="min-width: 104rpx;">
				<view class=" ">预约时间</view>
				<view class="">{{ order_info.order_info.reserve_time }}</view>
			</view>
			<view v-if="order_info.order_info.code != null" class="dis_flex mt20 fz26 tf_999" style="min-width: 104rpx;">
				<view class=" ">验证码</view>
				<view class="">{{ order_info.order_info.code }}</view>
			</view>
		</view>
		<view v-if="OrderObj.order_status==6" class="padding30 bac_f mt24">
			<view class="fw fz26">用户评论</view>
			<u-gap height="1" bgColor="#E7E7E7" marginTop="10"></u-gap>
			<view class="dis_flex mt20 fz26 tf_999">服务评价</view>
			<view class="evaluate-info mt20 radius16">
				<text class="fz26 slh dslh">{{ order_info.order_comment.text }}</text>
			</view>
		</view>
		<button open-type="contact" style="position: fixed; top: 50%;right: 0rpx;">
			<image class="w180 h180" src="../../static/xuanfu.png" mode="aspectFill"></image>
		</button>
	</view>
</template>

<script>
import { orderDetail } from '@/config/api.js';
export default {
	data() {
		return {
			xincount: '5',
			order_info: [],
			OrderObj:[],
		};
	},
	onLoad(option) {
		this.OrderObj = JSON.parse(decodeURIComponent(option.or));
		this.getOrderInfo(this.OrderObj.order_id);
		console.log('信息',this.OrderObj);
	},
	methods: {
		//时间戳转换
		timestampToTime(timestamp) {
			let Y, M, D, h, m, s;
			var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			Y = date.getFullYear() + '-';
			M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			D = date.getDate() + ' ';
			h = date.getHours() + ':';
			m = date.getMinutes() + ':';
			s = date.getSeconds();
			return Y + M + D + h + m + s;
		},
		getOrderInfo(id) {
			orderDetail({ order_id: id }).then(res => {
				console.log(res);
				this.order_info = res;
				this.order_info.order_info.xiadan_time = this.timestampToTime(this.order_info.order_info.xiadan_time);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.order-detail-bg {
	background-image: url('@/static/image/order_detail_bg.png');
}
	button::after {
		border: none;
	}
	button {
		position: relative;
		display: block;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		// font-size: 18px;
		text-align: center;
		text-decoration: none;
		// line-height: 1;
		line-height: 1.35;
		// border-radius: 5px;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000000;
		background-color: rgba(255,255,255,0);
	}
</style>
